
// 我发现这个toast调用非常的不便，于是我封装了一个JS

/*
    obj {
        type: enum, // success、warning、info、error，基于图标库
        icon: String, // 类名，会覆盖掉type
        title: String,
        messgae: String,
        prompt: String, // 提示文本
        duration: Number, // 自动关闭毫秒数，为0则不关闭
        position: enum, // top-left top-right top-center
        style: Object, // 自定义style类
        toastStyle: Object, // toast层的style类
        containerStyle: Object, // 外层容器自定义style类，方便封装调用
        offset: Array, // 一个二维数组，方便的对外层容器进行偏移，当position为center时x轴无效
        showBody: Boolean, // 是否启用body，默认true
        showClose: Boolean, // 是否展示关闭按钮，默认ture
    }
*/

// 维护一个队列，保证多个创建时不重叠，此处存的是id


const not_queue = [] 


export const BtNotification = (obj) => {

    // 方便封装的时候队列隔离开来
    const queue = obj.queue || not_queue

    // 通过时间戳生成一个唯一id
    const id = "BtToast" + new Date().valueOf() + Math.floor(Math.random() * 10000 + 1000)
    
    let iconClass = obj.icon
    if (!obj.icon && obj.type) {
        const iconEnum = {
            success: "bi bi-check-circle-fill text-success",
            warning: "bi bi-exclamation-circle-fill text-warning",
            error: "bi bi-x-circle-fill text-danger",
            info: "bi bi-info-circle-fill text-secondary"
        }

        iconClass = iconEnum[obj.type] || ''
    }
    const c_offset = obj.offset || [0, 0]
    
    // 根据队尾元素计算应该在哪生成
    let spawn_y = 24
    if (queue.length > 0) {
        // 计算
        const toast = $("#" + queue[queue.length - 1]).parent()
        
        const toast_y = toast.offset().top

        spawn_y = toast_y + toast.outerHeight() + 12
    }

    // x方向的css语句
    const spawn_x = 12
    let direction_x = ""

    const pos = obj.position || 'top_rigth'
    if (pos == 'top_left') {
        direction_x = "left: " + Number(spawn_x + c_offset[0]) + "px"
    }else if (pos == 'top_center') {
        direction_x = `left: 50%;transform: translateX(-50%)`
    }else {
        direction_x = "right: " + Number(spawn_x + c_offset[0]) + "px"
    }

    const template = `<div style="position: absolute;${ direction_x };top: ${ spawn_y + c_offset[1] }px;z-index: 1040;transition: top .25s;">
        <div id="${ id }" class="toast fade" ${ obj.duration != 0 ? `data-delay="${ obj.duration || 3000 }"` : 'data-autohide="false"' } >
            <div class="toast-header">
                <i class="${ iconClass } mr-1"></i>
                <strong class="mr-auto">${ obj.title || '' }</strong>
                <small class="text-muted">${ obj.prompt || '' }</small>

                <button class="ml-2 mb-1 close ${ obj.showClose == false ? 'd-none' : '' }" data-dismiss="toast">
                    <span>&times;</span>
                </button>
            </div>
            <div class="toast-body ${ obj.showBody == false ? 'd-none' : ''}">
                ${ obj.message || '' }
            </div>
        </div>
    </div>`

    // 附加到html上，然后显示
    $("html").append(template)
    // 将本元素推送到queue中
    queue.push(id)

    const item = $("#" + id)

    if (obj.style) {
        item.css(obj.style)
    }
    if (obj.containerStyle) {
        item.parent().css(obj.containerStyle)
    }

    item.toast('show')


    // 意味着会被关闭
    if (obj.duration != 0) {
        // 循环检测一段时间后删除元素
        const duration = obj.duration || 3000
        checkToastHide(id, duration, queue)
    }else {
        // 只能手动关闭，那么监听点击事件，避免长时间的资源浪费(反正我是这么认为的)
        item.find(".close").click(function() {
            checkToastHide(id, 200, queue)
        })
    }
}


// 传入id
const checkToastHide = (id, duration, queue) => {
    const item = $("#" + id)

    const handler = setInterval(() => {
        if (duration <= 0) {
            clearInterval(handler)
            return
        }
        duration --

        if (item.hasClass("hide")) {
            // 从queue中删除本元素

            // console.log("deal id = " + id)

            let idx = -1
            
            for (let i in queue) {
                if (queue[i] == id) {
                    idx = i
                    queue.splice(i, 1)
                    break
                }
            }

            const height = item.outerHeight() + 12 // 把间隔的12px也算上，剩下元素的偏移值
            // console.log(id, idx, item.parent())
            // console.log("the height", height, item.height(), item.outerHeight(), item.parent().height(), Number(item.parent().outerHeight()))

            item.parent().remove()
            if (idx != -1) {
                const len = queue.length // 把长度固定下来，避免新增导致一起位移了
                for (let i = idx; i < queue.length; i ++) {
                    const toast = $("#" + queue[i]).parent()
                    toast.css("top", toast.offset().top - height)
                }
                // console.log("remove id = " + id)
            }
            


            
            duration = -1
        }
    }, 1)
}